<template>
  <view class="main t-flex">
    <view class="t-flex top">
      <view
        class="top-item"
        @click="
          $wanlshop.auth('/pages/user/team/list?one_num=' + statistics.one_num + '&two_num=' + statistics.two_num)
        "
      >
        <view class="">
          <text class="t-color-fff t-size-40">{{ statistics.team_user_num }}</text>
        </view>
        <view class="t-flex" style="align-items: center">
          <text class="t-color-fff t-size-28">团队人数 <text class="t-color-fff t-size-22">（详情）</text></text>
          <!-- <text class="t-color-fff t-size-22" style="padding: 5rpx 10rpx;background-color: #007AFF;border-radius: 10rpx;">查看</text> -->
        </view>
      </view>
      <view class="top-item">
        <view class="">
          <text class="t-color-fff t-size-40">{{ statistics.team_num }}</text>
        </view>
        <view class="">
          <text class="t-color-fff t-size-28">团队业绩</text>
        </view>
      </view>

      <view
        class="top-item"
        @click="
          $wanlshop.auth(
            '/pages/user/team/moneyTeam?commission=' +
              statistics.commission +
              '&stay_commission=' +
              statistics.stay_commission,
          )
        "
      >
        <view class="">
          <text class="t-color-fff t-size-40">{{ statistics.commission }}</text>
        </view>
        <view class="">
          <text class="t-color-fff t-size-28">可提佣金<text class="t-color-fff t-size-22">（提现）</text></text>
        </view>
      </view>
    </view>
    <view class="" style="width: 690rpx; margin: 30rpx 0">
      <text class="t-size-30">奖金明细</text>
    </view>
    <block v-if="list.length > 0">
      <view class="user-item" v-for="(item, index) in list" :key="index">
        <view>
          <view class="t-flex" style="flex-direction: row; align-items: center; margin-bottom: 10rpx">
            <!-- <image class="user-img" src="https://ysqww.oss-cn-beijing.aliyuncs.com/uploads/20210903/6c97e3e3d4bb5b572f10c81eb1362832.gif" mode=""></image> -->
            <image class="user-img" :src="$wanlshop.oss(item.avatar, 35, 35, 2, '', '')" mode=""></image>
            <text class="t-size-28 t-color-444">{{ item.nickname }}</text>
          </view>
          <view class="">
            <text class="t-color-999 t-size-24">时间：{{ $wanlshop.timeFormat(item.updatetime) }}</text>
          </view>
        </view>
        <view style="max-width: 400rpx">
          <text class="t-color-444 t-size-28">{{ item.memo }}+{{ item.commission }} ; 业绩+{{ item.team_num }}</text>
        </view>
      </view>
    </block>
    <block v-else>
      <wanl-empty src="notice_default3x" text="没有更多啦！" />
    </block>
  </view>
</template>
<script>
export default {
  //注册组件
  components: {},
  //mixins: [route],
  data() {
    return {
      statistics: {
        team_num: '0.00', //		团队业绩
        total_commission: '0.00', //累计佣金
        commission: '0.00', //		可提现佣金
        stay_commission: '0.00', //	待入账佣金
        team_user_num: 0, //		团队人数

        one_num: 0, //				团队人数 1
        two_num: 0, //				团队人数 2
      },
      list: [],
      page: 1,
      total: 1,
    };
  },
  //监听属性
  computed: {
    // test: {
    // 	//业务逻辑代码,test的值完全取决于return回来的值
    // 	get:()=> {return 2; },
    // 	set: (val)=> {}
    // }
  },
  /**
   * 监控data中的数据变化
   */
  watch: {
    // test: {
    // 	handler(newValue, oldValue) {
    // 	},
    // 	deep: true,	//深度监听
    // 	immediate: true,// 立即先去执行里面的handler方法
    // }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(option) {
    this.getNum();
    this.getList();
  },
  // 页面上拉触底事件的处理函数
  onReachBottom() {
    if (this.total > this.page) {
      this.page = ++this.page;
      this.getList();
    }
  },
  /** 方法合集 */
  methods: {
    getList() {
      // 佣金记录
      this.$api.get({
        baseUrl: this.$wanlshop.config('vipBaseUrl'),
        url: '/distribution/user/commissionLog',
        data: {
          page: this.page,
        },
        loadingTip: '加载中...',
        success: res => {
          console.log('佣金记录 ========>', res);
          this.list = this.list.concat(res.data);
          this.total = res.last_page;
        },
      });
    },
    getNum() {
      // 我的团队统计
      this.$api.post({
        baseUrl: this.$wanlshop.config('vipBaseUrl'),
        url: '/distribution/user/info',
        contentType: 'form',
        loadingTip: '加载中...',
        success: res => {
          console.log('我的团队统计 ========>', res);
          for (let key in res) {
            // console.log(  ' ========>',key);
            this.statistics[key] = res[key] || '0';
          }
        },
      });
    },
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},
  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh: function () {},
  //  点击 tab 时触发，参数为Object，具体见下方注意事项           微信小程序、百度小程序、H5、5+App（自定义组件模式）
  onTabItemTap: function (e) {},
  //  监听页面滚动，参数为Object
  onPageScroll: function (e) {},
  //  监听原生标题栏按钮点击事件，参数为Object	         5+ App、H5
  onNavigationBarButtonTap: function (e) {},
  //  监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解	5+App、H5
  onBackPress: function () {},
};
</script>
<style lang="scss" scoped>
// @import "@/styles/t-base.scss";
.t-flex {
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: column;
}

.t-color-333 {
  color: #333333;
}

.t-size-40 {
  font-size: 40rpx;
}

.t-size-32 {
  font-size: 32rpx;
}

.t-size-30 {
  font-size: 30rpx;
}

.t-size-24 {
  font-size: 24rpx;
}

.t-size-22 {
  font-size: 22rpx;
}

.t-size-28 {
  font-size: 28rpx;
}

.t-color-666 {
  color: #666666;
}

.t-color-999 {
  color: #999999;
}

.t-color-444 {
  color: #444444;
}

.t-color-fff {
  color: #ffffff;
}

.t-font-700 {
  font-weight: 700;
}

.main {
  width: 750rpx;
  align-items: center;
}

.top {
  flex-direction: row;
  width: 750rpx;
  height: 160rpx;
  background: #fe6600;
  // border-radius: 0 0 20rpx 20rpx ;
  justify-content: space-around;
  align-items: center;
}

.top-item {
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.user-item {
  width: 750rpx;
  height: 184rpx;
  background: #ffffff;
  box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(205, 205, 205, 0.3);
  border-radius: 4rpx;
  padding: 0 30rpx;
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.user-img {
  width: 72rpx;
  height: 72rpx;
  margin-right: 20rpx;
  border-radius: 100rpx;
}
</style>
